<template>
  <div>
    <div class="top-info">
      <div class="org-info">
        <switchSpace
          ref="switchSpace"
          style="height: 30px; line-height: 30px"
        />
        <!-- <div class="org-info__line"></div> -->
      </div>
      <div class="top-info-menu">
        <div
          v-for="(route, index) in computedRoutes"
          :key="index"
          class="top-info-menu-item cursor-pointer hover-blue"
          :class="{
            active: new RegExp(route.reg).test($route.path),
          }"
        >
          <router-link :to="route.path">{{ route.name }}</router-link>
        </div>
      </div>
      <div class="user-info">
        <span class="msg">
          <CloudButton class="msg__button" @click="linkMsg">
            在线咨询
          </CloudButton>
        </span>
        <CloudDropdown
          overlayClassName="user-info-notify"
          placement="bottomLeft"
          v-model="notifyVisible"
        >
          <span class="notify">
            <app-icon
              iconName="vcloud-remind1"
              className="notify__icon cursor-pointer hover-blue"
            />
            <span class="new" v-if="hasUnRead">New</span>
          </span>
          <CloudTabs
            class="notice-tabs"
            slot="overlay"
            :tabList="tabList"
            v-model="activeTab"
            :defaultKey="2"
            size="small"
            :showBottomBorder="true"
            @click="tabClick"
          >
            <div v-if="noticeList && noticeList.length && activeTab === 2">
              <div class="notice-operation">
                <CloudCheckbox
                  class="notice-operation-checkbox"
                  :checked="onlyNotRead"
                  @change="noticeCheckChange"
                  >只看未读</CloudCheckbox
                >
                <!-- <span
                  class="notice-operation-span"
                  :class="hasUnRead ? '' : 'notice-operation-span-disabled'"
                  @click="readAll"
                  >全部已读</span
                > -->
              </div>
              <div class="notice-menu-content">
                <CloudMenu
                  v-if="displayNoticeList && displayNoticeList.length"
                  class="notice-menu"
                >
                  <CloudMenuItem
                    :key="item.id + index"
                    @click="handleItemClick(item)"
                    v-for="(item, index) in displayNoticeList"
                  >
                    <div class="message-list">
                      <div
                        class="title"
                        :class="item.isLook ? '' : 'un-read'"
                        v-html="item.title"
                      ></div>
                      <div
                        class="content"
                        :class="item.isLook ? '' : 'un-read'"
                        v-html="item.content"
                      ></div>
                      <div class="date">
                        {{ item.sendAt }}
                      </div>
                    </div>
                  </CloudMenuItem>
                </CloudMenu>
                <CloudEmpty v-else type="simple"></CloudEmpty>
              </div>
            </div>
            <CloudEmpty v-else type="simple"></CloudEmpty>
          </CloudTabs>
        </CloudDropdown>
        <CloudDropdown placement="bottomCenter">
          <span>
            <app-icon
              iconName="vcloud-help"
              className="user-info__help cursor-pointer hover-blue"
            />
          </span>
          <CloudMenu slot="overlay" @click="handleHelpCommand">
            <CloudMenuItem v-for="(help, i) in helpList" :key="i">{{
              help.title
            }}</CloudMenuItem>
          </CloudMenu>
        </CloudDropdown>
        <CloudAvatar
          v-if="userInfo.avatarUrl"
          :src="`${userInfo.avatarUrl}?x-image-process=image/resize,w_30`"
          class="user-info__avatar"
        ></CloudAvatar>
        <CloudAvatar
          v-else
          :src="
            ``
          "
          class="user-info__avatar"
        ></CloudAvatar>
        <CloudDropdown overlayClassName="top-info-dropDown">
          <div>
            <app-icon
              iconName="vcloud-youjiantou2"
              className="org-info__icon cursor-pointer hover-blue"
            />
          </div>
          <CloudMenu slot="overlay" @click="openUserInfo">
            <CloudMenuItem key="about" class="top-info-about"
              >关于</CloudMenuItem
            >
            <!-- <el-dropdown-item @click.native="gotoManage">云设计后台</el-dropdown-item> -->
          </CloudMenu>
        </CloudDropdown>
      </div>
    </div>
    <cloud-modal
      :visible="noticeModal"
      title="公告"
      :width="539"
      :showOk="false"
      v-if="noticeItem"
      :zIndex="99999999999"
      @cancel="cancelModal"
    >
      <div class="notice">
        <div class="title">
          {{ noticeItem.taskName }}
        </div>
        <div class="content" v-html="noticeItem.content"></div>
        <div class="date">
          {{ noticeItem.sendAt }}
        </div>
      </div>
    </cloud-modal>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
import { openWin, stringifyParams } from "cloud-common/tool/tool";
import switchSpace from "./switchSpace";
import {
  CloudModal,
  CloudDropdown,
  CloudAvatar,
  CloudCheckbox,
  CloudMenu,
  CloudMenuItem,
  CloudTabs,
  CloudEmpty,
  CloudButton,
} from "cloud-components";
// import { CloudTabs, CloudEmpty } from '../../../../../../../协同云组件库/cloud-components/packages'
import { mapGetters } from "vuex"; // 引入状态共享
import portalRoutes from "../../../router/portal";

export default {
  name: "top-info",
  components: {
    switchSpace,
    CloudModal,
    CloudDropdown,
    CloudAvatar,
    CloudTabs,
    CloudCheckbox,
    CloudMenu,
    CloudMenuItem,
    CloudButton,
    CloudEmpty,
  },
  props: {},
  data() {
    return {
      queryName: "",
      helpList: [],
      openUserInfoV: "",
      openUserInfoState: true,
      noticeModal: false,
      noticeList: [],
      noticeItem: null,
      timer: null,
      tabList: [
        {
          key: 1,
          tab: "我的消息",
        },
        {
          key: 2,
          tab: "系统消息",
        },
      ],
      activeTab: 2,
      onlyNotRead: false,
      notifyVisible: false,
    };
  },

  beforeDestroy() {
    clearTimeout(this.timer);
    this.timer = null;
  },
  computed: {
    ...mapGetters(["userInfo", "getUserInfoByKey"]),
    orgLogo() {
      return (
        (this.userInfo && this.userInfo.spaceLogo) ||
        require("@/assets/images/default.png")
      );
    },
    computedRoutes() {
      let menuAuth = this.getUserInfoByKey("menuSummary") || [];
      const arr = menuAuth.map(el => el.uniqueIdentify);
      return portalRoutes.filter(route => arr.indexOf(route.key) > -1);
    },
    hasUnRead() {
      for (let index = 0; index < this.noticeList.length; index++) {
        const notice = this.noticeList[index];
        if (!notice.isLook) {
          return true;
        }
      }
      return false;
    },
    displayNoticeList() {
      return this.noticeList.filter(notice => notice.show);
    },
  },
  watch: {
    "$store.state.commonData.queryAppName"(val) {
      this.queryName = val;
    },
    showDropdown(val) {
      alert(val);
    },
  },
  created() {
    setTimeout(() => {
      this.api.getHelpCenterInfo({}, { method: "get" }).then(({ data }) => {
        this.helpList = data;
      });
      this.api
        .getAboutInfo({}, { method: "get" })
        .then(data => {
          this.openUserInfoV = data.data;
        })
        .catch(e => {
          this.openUserInfoState = false;
        });
      this.getNoticeList();
    }, 3000);
    setTimeout(() => {
      this.getNoticeList();
    }, 300000);
    // this.getNoticeList();

    this.sleepNotice();
  },
  methods: {
    handleHelpCommand(e) {
      const i = e.key;
      const help = this.helpList[i];
      if (help.url) {
        openWin(help.url, help.title);
      } else {
        this.$parent.triggerNewerGuide();
      }
    },
    handleItemClick(item) {
      this.noticeModal = true;
      this.noticeItem = item;
      this.api
        .readNotification(
          { params: { id: item.id } },
          { method: "get", customRequest: true }
        )
        .then(data => {
          this.getNoticeList();
        });
    },
    openUserInfo() {
      if (this.openUserInfoV) {
        this.$cloudConfirm.info({
          title: "关于",
          content: h => (
            <div style="margin-left: -38px;">
              <h4 class="userInfoStyle">云设计中心</h4>
              <p class="userInfoStyle">当前版本：{this.openUserInfoV}</p>
            </div>
          ),
          onOk() {},
        });
      } else {
        // if (this.openUserInfoState) {
        //   setTimeout(() => {
        //     this.openReleteSetting();
        //   }, 500);
        // }
      }
    },
    goToquery() {
      this.$store.commit("commonData/SET_QUERY_APP_NAME", this.queryName);
      if (!this.queryName) return;
      const url = encodeURI(
        `/main/app/queryApp?queryName=${
          this.queryName
        }&rnd=${new Date().getTime()}`
      );
      if (this.$route.path === "/main/app/queryApp") {
        this.$router.replace(url);
      } else {
        this.$router.push(url);
      }
    },
    sleepNotice() {
      this.timer = setTimeout(() => {
        clearTimeout(this.timer);
        this.getNoticeList();
        this.sleepNotice();
      }, 300000);
    },
    getNoticeList() {
      // let data = { "code": "200", "message": null, "data": { "content": [{ "summary": null, "channel": "GG", "isLook": false, "type": "TEXT", "title": "lxbceshi", "content": "<p>lxbceshi</p>", "createdAt": "2020-10-16 11:48:09", "showType": 1, "taskName": "lxbceshi", "id": "16028200883040000", "sendAt": "2020-10-16 11:51:00", "openMethod": "NEW_PAGE", "category": "SYSTEM" }, { "summary": null, "channel": "GG", "isLook": true, "type": "TEXT", "title": "1015更新云设计中心", "content": "<p>测试数据998765<a href=\"https://pro.formtalk.net/pub.do?f=176D9FF64B6B5AAFDB6BB1A48AA2F245886AB2F736403A955697058C98477B32\" target=\"_blank\" style=\"background-color: rgb(255, 255, 255);\">填写入口</a></p><a href=\"https://pro.formtalk.net/pub.do?f=176D9FF64B6B5AAFDB6BB1A48AA2F245886AB2F736403A955697058C98477B32\" target=\"_blank\"></a>", "createdAt": "2020-10-10 11:29:30", "showType": 1, "taskName": "云设计中心公告通知", "sendAt": "2020-10-10 11:30:00", "id": "16023005693040000", "openMethod": "NEW_PAGE", "category": "SYSTEM" }], "totalElements": 2 } }
      // data.data.content.forEach(el => {
      //   el.show = true;
      // });
      // this.noticeList = data.data.content;
      // this.noticeList = this.noticeList.concat(this.noticeList)
      // this.noticeList = this.noticeList.concat(this.noticeList)
      // this.noticeList = this.noticeList.concat(this.noticeList)
      // this.noticeList.map(item => {
      //   let date_d = Math.abs(new Date(item.sendAt).getTime() - Date.now());
      //   if (date_d <= 30000 && item.isLook == false) {
      //     this.handleItemClick(item);
      //   }
      // });

      this.api
        .searchLibNotification({}, { method: "post" })
        .then(data => {
          data.data.content.forEach(el => {
            el.show = true;
          });
          this.noticeList = data.data.content;
          this.noticeList.map(item => {
            let date_d = Math.abs(new Date(item.sendAt).getTime() - Date.now());
            if (date_d <= 30000 && item.isLook == false) {
              this.handleItemClick(item);
            }
          });
        })
        .catch(e => {
          clearTimeout(this.timer);
          this.timer = null;
        });
    },
    gotoManage() {
      openWin("/desCenterMange.html", "desCenterMangeHtml");
    },
    linkMsg() {
      openWin("https://wpa1.qq.com/VadJ4tSi?_type=wpa&qidian=true");
    },
    cancelModal() {
      this.noticeModal = false;
      this.noticeItem = null;
    },
    noticeCheckChange(e) {
      this.onlyNotRead = e.target.checked;
      this.changeNotRead();
    },
    changeNotRead() {
      if (this.onlyNotRead) {
        this.noticeList.forEach(notice => {
          notice.show = !notice.isLook;
        });
      } else {
        this.noticeList.forEach(notice => {
          notice.show = true;
        });
      }
    },
    readAll() {
      this.hasUnRead &&
        this.noticeList.forEach(notice => {
          notice.isLook = true;
        });
      this.changeNotRead();
    },
    tabClick() {
      this.notifyVisible = true;
    },
  },
};
</script>
<style lang="scss" src="@/assets/styles/main/topInfo.scss" scoped></style>
<style lang="scss">
@import "@/assets/styles/base/color.scss";
.top-info__org-popover {
  width: 239px;
  height: 207px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.top-info__org-popover--image {
  width: 50px;
  height: 50px;
  background: linear-gradient(
    180deg,
    rgba(243, 90, 137, 1) 0%,
    rgba(95, 81, 245, 1) 100%
  );
}
.top-info__org-popover--text {
  width: 210px;
  height: 30px;
  font-size: 18px;
  font-weight: 600;
  line-height: 30px;
  margin-top: 10px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.el-popper.top-info__user-popover {
  padding-left: 0;
  padding-right: 0;
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.05);
  border-radius: 2px;
  border: 1px solid rgba(219, 223, 230, 1);
}
.top-info__user-popover--item {
  padding: 4px 12px;
  &:hover {
    background: #ebecf1;
  }
}
h4.userInfoStyle {
  text-align: center;
  font-size: 18px;
  color: $black_1;
  margin-bottom: 22px;
  line-height: 20px;
}
p.userInfoStyle {
  text-align: center;
  font-size: 14px;
  color: $black_1;
}
.el-message-box__message p.userInfoStyle {
  line-height: 20px;
}
.ant-dropdown.user-info-notify {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  padding-top: 13px;
  width: 360px;

  .ant-dropdown-menu {
    padding: 0;
    width: 253px;
    min-height: 284px;
    max-height: 364px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    overflow-y: auto;
    padding: 11px 0 0 0;
  }

  .ant-dropdown-menu-item {
    padding: 0;
    white-space: normal;
  }
  .ant-dropdown-menu-item:hover,
  .ant-dropdown-menu-submenu-title:hover {
    background-color: #ffffff;
  }

  .message-list {
    overflow-y: auto;
    position: relative;
    margin-bottom: 20px;

    .title {
      max-height: 40px;
      font-size: 14px;
      font-weight: 400;
      color: #333333;
      line-height: 20px;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      word-break: break-all;
      white-space: normal;
      width: 169px;
      margin-bottom: 4px;
    }
    .content {
      max-height: 40px;
      font-size: 14px;
      font-weight: 400;
      color: #333333;
      line-height: 20px;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      word-break: break-all;
      white-space: normal;
      p {
        margin-bottom: 0;
      }
    }
    .un-read {
      font-weight: 600;
    }
    .date {
      position: absolute;
      top: 0;
      right: 0;
      margin-top: 2px;
      height: 17px;
      font-size: 12px;
      text-align: right;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      line-height: 17px;
    }
  }
}
.top-info-dropDown,
.ant-dropdown {
  padding: 10px 0;
  margin: 5px 0;
  .top-info-about {
    list-style: none;
    line-height: 36px;
    padding: 0 20px;
    margin: 0;
    font-size: 14px;
    color: #606266;
    cursor: pointer;
    outline: 0;
  }
}
.notice {
  .title {
    font-size: 16px;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    text-align: center;
  }
  .content,
  .date {
    margin-top: 20px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    line-height: 20px;
  }
  .date {
    text-align: right;
  }
}
.notice-operation {
  display: flex;
  justify-content: flex-end;
  padding: 12px 0;

  .notice-operation-checkbox {
    padding-right: 20px;
  }

  .notice-operation-span {
    padding-left: 12px;
    padding-right: 20px;
    cursor: pointer;
  }

  .notice-operation-span:not(.notice-operation-span-disabled):hover {
    color: #007aff;
  }

  .notice-operation-span-disabled {
    // pointer-events: none;
    color: #cccccc;
    cursor: not-allowed;
  }
}
.notice-menu-content {
  min-height: 150px;
  max-height: 360px;
  overflow-y: auto;
}
.notice-menu.ant-menu.ant-menu-vertical {
  border: none;

  .ant-menu-item {
    height: auto;
    padding: 0 20px;
    margin: 0;
  }

  .ant-menu-item-selected,
  .ant-menu-item-active {
    background: #ffffff !important;
  }
}
.cloud-tabs.notice-tabs.cloud-tabs-border-bottom-true {
  .ant-tabs-tab:nth-child(1) {
    margin-left: 15px;
  }
}
</style>
